<template>
<div class="galary-content">
    <div class="wrapper">
        <div class="imgWrapper" v-for="item in imgList[this.index][this.index]" :key="item.id" @click="chenge">
            <img :src="item.imgUrl">
        </div>
    </div>
    <div class="galary" v-show="show">
        <swiper :options="swiperOption">

            <swiper-slide class="galary-swiper" v-for="item of imgList[this.index][this.index]" :key="item.id" :length=length>
                <div class="galary-img">
                    <img :src="item.imgUrl" />
                </div>
                <div class="x" @click="x">X</div>
                <div class="desc">{{parseInt(item.id)+1}}/{{length}}</div>

            </swiper-slide>

            <!-- <div class="swiper-pagination"  slot="pagination"></div> -->

        </swiper>
    </div>
</div>
</template>

<script>
//	引入组件
import {
    mapState
} from 'vuex'

//	定义输出组件name

export default {
    props: {
        imgList: Array,
    },
    name: 'galaryContent',
    //注册组件
    // 把vuex中的仓库进行映射
    computed: mapState(['index']),

    mounted() {},
    methods: {
        chenge() {
            this.show = true
            this.length = this.imgList[this.index][this.index].length
        },
        x() {
            this.show = false
        },
    },
    data() {
        return {
            length: 1,
            show: false,
            swiperOption: {
                loop: false
            },

        }
    },

}
</script>

<style scoped>
.desc {
    position: absolute;
    top: -60px;
    left: 50%;

}

.x {
    height: 20px;
    width: 30px;
    border: solid 2px rgb(185, 181, 181);
    position: absolute;
    top: 450px;
    left: 48%;
    z-index: 200;
    text-align: center;
    border-radius: 35px;
    padding-top: 2px;

}

.galary-swiper {
    margin: 120px 0px;
    background-color: #000;

}

.galary {
    position: absolute;
    top: -50px;
    background-color: rgb(0, 0, 0);

    height: 800px;
    width: 100%;
    margin: -30px 0px;

    color: #fff;

}

.galary-img {
    width: 100%;
    height: 500px;
}

.galary-content {
    width: 100%;
    position: absolute;
    top: 70px;
    left: 0px;

}

.wrapper {
    background-color: #fff;
    width: 100%;
}

.imgWrapper {
    width: 49%;
    height: 150px;
    float: left;
    background-color: #aaa;
    margin: 1.5px;

}

.imgWrapper img {
    width: 100%;
    height: 100%;
}

.galary-img img {

    width: 100%;
    height: 70%;

}
</style>
